<script setup>
import {ref,onMounted, reactive} from 'vue'
import easyapi from '../api'
import { ElMessage, ElMessageBox } from 'element-plus'
import { number } from 'echarts';


//定义绑定的数据
const tableData=ref([]);
//控制新增窗口是否显示
const addWinVisible=ref(false);
//控制编辑信息窗口
const editWinVisible=ref(false);
//新增数据绑定对象
const addObject=ref({
  name: '',
  phone_number: '',
  id_number: '',
  number: '', // 确保这里是一个房间号
  rate: '',
  check_in_date: '',
  check_out_date: ''
});


//编辑数据绑定对象
const editObject=ref({
  name: '',
  phone_number: '',
  id_number: '',
  number: '', // 确保这里是一个房间号
  rate: '',
  check_in_date: '',
  check_out_date: ''
});
//记录修改数据的下标
var editIndex=-1;
var editStatusIndex=-1;
const checkinObject=ref({});

const delObject=ref({});
const checkObj=ref({
  page:1,
  size:5
});
const total=ref(90);
//分页绑定对象
// const pageObj=ref({
//   size:20,
//   page:1
// })
//查询数据的文本
//挂载页面时查询数据
onMounted(async function(){
  checkDate();
});

const del=function(index,row){
  ElMessageBox.confirm(
'确定取消预定吗？',
'提示框',
{
confirmButtonText:"确认",
cancelButtonText:"取消",
type:'warning',
}
  ).then(async function(){
    delObject.value.status="空闲";
    delObject.value.number=row.number;
    delObject.value.re_status="已取消";
    //提交数据
    let result =await easyapi.putForm("/api/reservations_status",delObject.value);
    //刷新表单数据
    tableData.value[index].status="空闲";
    tableData.value[index].re_status="已取消";
    // tableData.value.splice(index,1);
    if(result.code==200){
    //提示删除成功
    ElMessage({
        type: 'success',
        message: '取消成功',
      })
    }else{
      ElMessage({
        type: 'info',
        message: 'result.message',
      })
    }
  })
}
//显示窗口
const openAddWin=()=>{
  addObject.value={};
  addWinVisible.value=true;
}
const closeAddWin=()=>{
  addWinVisible.value=false;
} 
//保存新增数据  addObject
const addSave=async function(){
  console.log(addObject);
  addObject.value.status="已预定";
  addObject.value.number=number;
  //发送请求
  // easyapi.postForm('/api/staff',addObject.value);
  let result=await easyapi.postForm('/api/reservationsjson',addObject.value);
  //表格数据变更
  tableData.value.unshift(result.data);
  ElMessage({
        type: 'success',
        message: '保存成功',
      })
  //提示
  closeAddWin();
}
/***************************** */

// const editStatus=function(index,row){
//   //记录数该数据的下标
//   editStatusIndex=index;
//   //绑定要修改的数据
//   editStatusObject.value.id=row.id;
//   editStatusObject.value.name=row.name;
//   editStatusObject.value.number=row.number;
//   editStatusObject.value.rate=row.rate;
//   editStatusObject.value.total_amount=row.total_amount;
//   editStatusObject.value.check_in_date=row.check_in_date;
//   editStatusObject.value.check_out_date=row.check_out_date;
//   //打开对话框
//   editStatusWinVisible.value=true;

// }

//点击编辑按钮执行的方法
const edit=function(index,row){
  //记录数该数据的下标
  editIndex=index;
  //绑定要修改的数据
  editObject.value.id=row.id;
  editObject.value.name=row.name;
  editObject.value.number=row.number;
  editObject.value.rate=row.rate;
  editObject.value.total_amount=row.total_amount;
  editObject.value.check_in_date=row.check_in_date;
  editObject.value.check_out_date=row.check_out_date;
  //打开对话框
  editWinVisible.value=true;

}
const formRef=ref([]);
//保存修改编辑数据
const editSave=async function(){
formRef.value?.validate(async valid=>{
  if(valid){
     //发送请求
  let result=await easyapi.putForm("/api/reservationsjson",editObject.value); 
  //刷新表格
  tableData.value[editIndex]=result.data;
    //提示
    ElMessage({
        type: 'success',
        message: '保存成功',
      });editWinVisible.value=false;
  }else{
    console.log("格式不正确");
    return false;
  }
})

}
// const changePage=function(val){
// //val就是点击的页码
// pageObj.value.page=val;

// }

//表单验证
const editrules=reactive({
  name: [
    { required: true, message: '请输入客人姓名', trigger: 'blur' },
    {
      pattern: /^[\u4e00-\u9fa5]{2,4}$/, // 匹配两到四个汉字
      message: '客人姓名必须为两到四个汉字',
      trigger: 'blur'
    }
  ],
  phone_number: [
    { required: true, message: '请输入电话号码', trigger: 'blur' },
    {
      pattern: /^(1[3-9]\d{9})$/, // 匹配以13至19开头的11位数字
      message: '输入正确的手机号',
      //'电话号码必须为11位数字，并且以13至19开头',
      trigger: 'blur'
    }
  ],
  id_number: [
    { required: true, message: '请输入身份证号', trigger: 'blur' },
    {
      pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, // 匹配身份证号
      //15位纯数字的身份证号码。
      //18位纯数字的身份证号码。
      //18位身份证号码，其中最后一位是数字或X（大小写均可）。
      message: '请输入正确的身份证号',
      trigger: 'blur'
    }
  ],
  check_in_date: [
    { required: true, message: '请选择开始日期', trigger: 'change' }
  ],
  check_out_date: [
    { required: true, message: '请选择结束日期', trigger: 'change' },
    {
      validator: (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请选择结束日期'));
        }
        if (!editObject.value.check_in_date) {
          return callback(new Error('请选择开始日期'));
        }
        if (new Date(value) <= new Date(editObject.value.check_in_date)) {
          return callback(new Error('结束日期必须大于开始日期'));
        }
        callback();
      },
      trigger: 'change'
    }
  ]
})

/********************************************************** */
const checkDate=async function(val){
  if(typeof val=='number'){
    checkObj.value.page=val;
  }
  //查询数据
  let result = await easyapi.getSearch("/api/searchreservations",checkObj.value);
  //result现在返回的数据 {code,data,message}   data-->{list,count}
  //更新表格数据中的数据
tableData.value=result.data.list;
total.value=result.data.count;
}

const checkin=async function(index,row){
  checkinObject.value.name=row.name;
  checkinObject.value.reservation_id=row.id;
  checkinObject.value.number=row.number;
  checkinObject.value.check_in_date=row.check_in_date;
  checkinObject.value.check_out_date=row.check_out_date;
  checkinObject.value.re_status=row.re_status;

  let result= await easyapi.postForm("/api/checkinsjson_re",checkinObject.value);

  tableData.value=result.data.list;
total.value=result.data.count;

ElMessageBox.confirm(
'确定要入住吗',
'提示框',
{
confirmButtonText:"确认",
cancelButtonText:"取消",
type:'warning',
}
  ).then(async function(){
    delObject.value.status="已入住";
    delObject.value.number=row.number;
    delObject.value.check_in_date=row.check_in_date;
    delObject.value.check_out_date=row.check_out_date;
    delObject.value.re_status="已入住";
    //提交数据
    let result =await easyapi.putForm("/api/reservations_status",delObject.value);
    tableData.value[index].status="已入住";
    tableData.value[index].re_status="已入住";
    //刷新表单数据
    // tableData.value.splice(index,1);
    if(result.code==200){
    //提示删除成功
    ElMessage({
        type: 'success',
        message: '入住成功',
      })
    }else{
      ElMessage({
        type: 'info',
        message: '入住失败',
      })
    }
  })
}
/************************************ */


</script>



    <template>
    <el-input v-model="checkObj.name" style="width: 150px" placeholder="请输入查询的客人姓名" clearable/>
        <el-input v-model="checkObj.number" style="width: 150px" placeholder="请输入查询的房间号" clearable/>
        <el-button type="success" @click="checkDate">查询</el-button>
    <!-- <el-button type="success" @click="openAddWin">新增预约</el-button> -->
  <el-table
    :data="tableData"
    style="width: 100%"
  >
    <!-- <el-table-column prop="id" label="ID" width="180" /> -->
    <el-table-column prop="name" label="客人姓名" width="180"/>
    <el-table-column prop="number" label="房间号" width="180" />
    <!-- <el-table-column prop="rate" label="预定单价" width="180" /> -->
    <el-table-column prop="check_in_date" label="开始日期" width="180" />
    <el-table-column prop="check_out_date" label="结束日期" width="180" />
    <el-table-column prop="re_status" label="预约状态" width="180" />
    <!-- <el-table-column prop="total_amount" label="总金额"  /> -->
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="warning" v-if="scope.row.re_status === '预定中'" @click="checkin(scope.$index,scope.row)">入住</el-button>
        <el-button type="danger" v-if="scope.row.re_status === '预定中'" @click="del(scope.$index,scope.row)">取消预约</el-button>
        <el-button type="warning" v-if="scope.row.re_status === '预定中'" @click="edit(scope.$index,scope.row)">修改</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!--current-page分页组件初始显示的页码 size每页的条数  -->
  <el-pagination 
  :page-size="checkObj.size"
  :current-page="checkObj.page"
  background layout="prev, pager, next" :total="total" @current-change="checkDate"/>



  <!--start 新增信息弹出框 -->
    <el-dialog v-model="addWinVisible" title="新增预定信息" width="500">
      <el-form :model="addObject">
      <el-form-item label="客人姓名" label-width="80">
        <el-input v-model="addObject.name" autocomplete="off" placeholder="客人姓名" clearable/>
      </el-form-item>
      <el-form-item label="电话号码" label-width="80">
        <el-input v-model="addObject.phone_number" autocomplete="off" placeholder="电话号码" clearable />
      </el-form-item>
      <el-form-item label="身份证号" label-width="80">
        <el-input v-model="addObject.id_number" autocomplete="off" placeholder="身份证号" clearable />
      </el-form-item>
      <el-form-item label="房间号" label-width="80" >
        <el-input v-model="addObject.number" autocomplete="off" placeholder="房间号" clearable/>
      </el-form-item>
      <!-- <el-form-item label="房间单价" label-width="80">
        <el-input v-model="addObject.rate" autocomplete="off"  placeholder="价格" clearable/>
      </el-form-item> -->
      <el-form-item label="开始日期" label-width="80">
        <el-date-picker
          v-model="addObject.check_in_date"
          type="date"
          placeholder="入住日期"
          clearable
          :size="size"
          :shortcuts="shortcuts"
          value-format="YYYY-MM-DD"
          :disabled-date="disabledDate"
        />
      </el-form-item>
      <el-form-item label="结束日期" label-width="80">
        <el-date-picker
          v-model="addObject.check_out_date"
          type="date"
          placeholder="退房日期"
          clearable
          value-format="YYYY-MM-DD" 
          :size="size"
          :shortcuts="shortcuts"
          :disabled-date="disabledDate"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addWinVisible = false">取消</el-button>
        <el-button type="primary" @click="addSave">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog> 
  <!--end 新增信息弹出框-->

  <!-- 编辑信息弹出框 -->
  <el-dialog v-model="editWinVisible" title="修改预定信息" width="500">
      <el-form :model="editObject" :rules="editrules" ref="formRef">
      <el-form-item label="客人姓名" label-width="80" prop="name">
        <el-input v-model="editObject.name" autocomplete="off" placeholder="客人姓名" readonly/>
      </el-form-item>
      <el-form-item label="房间号" label-width="80">
        <el-input v-model="editObject.number" autocomplete="off" readonly/>
      </el-form-item>
      <el-form-item label="电话号码" label-width="80" prop="phone_number">
        <el-input v-model="editObject.phone_number" autocomplete="off" placeholder="电话号码" />
      </el-form-item>
      <el-form-item label="身份证号" label-width="80" prop="id_number">
        <el-input v-model="editObject.id_number" autocomplete="off" placeholder="身份证号" />
      </el-form-item>
      <el-form-item label="开始日期" label-width="80" prop="check_in_date">
        <el-date-picker
          v-model="editObject.check_in_date"
          type="date"
          placeholder="入住日期"
          clearable
          :size="size"
          :shortcuts="shortcuts"
          value-format="YYYY-MM-DD"
          :disabled-date="disabledDate"
        />
      </el-form-item>
      <el-form-item label="结束日期" label-width="80" prop="check_out_date">
        <el-date-picker
          v-model="editObject.check_out_date"
          type="date"
          placeholder="退房日期"
          clearable
          value-format="YYYY-MM-DD" 
          :size="size"
          :shortcuts="shortcuts"
          :disabled-date="disabledDate"
        />
      </el-form-item>
      
      
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="editWinVisible = false">取消</el-button>
        <el-button type="primary" @click="editSave">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog> 
  <!-- end编辑 -->


</template>
<style>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>
